<template>
  <el-dialog
    :title="title"
    height='500px'
    :visible.sync="zhuangrai"
    :closeOnClickModal="false"
    :showClose="false"
  >
    <el-form  :model="updateData">
      <el-form-item label="id" :label-width="formLabelWidth">
        <el-input
          v-model="updateData.id"
          autocomplete="off"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="updateData.food_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="updateData.food_price" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-input
          v-model="updateData.food_action"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="updateData.food_type" :placeholder="updateData.food_type">
          <el-option label="炒菜" value="炒菜"></el-option>
          <el-option label="烧菜" value="烧菜"></el-option>
          <el-option label="凉菜" value="凉菜"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="updateMenu">确 定</el-button>
    </div>
  </el-dialog>
  

  
</template>

<script>
import * as api from "../utils/api";
export default {
  name: "updateMenmu",
  props: ["zhuangrai", "updateData", "title", "plain"],
  data() {
    return {
      dialogTableVisible: false,
      //   dialogFormVisible: false,
      form: {
        food_action: 0,
        food_create_time: "",
        food_img: "",
        food_name: "",
        food_price: "",
        food_type: "",
        id: 0,
      },
      fenl: "",
      fromData: {},
      formLabelWidth: "120px",
      imageUrl: "",
    };
  },
  methods: {
    close() {
      this.$emit("close");
      console.log(this.updateData);
    },
    updateMenu(obj) {
      if (this.title === "更新菜品") {
        console.log(this.updateData);
        this.axios({
          method: "post",
          url: api.DJLUPDATEFOOL,
          data: {
            id: this.updateData.id,
            food_name: this.updateData.food_name,
            food_action: this.updateData.food_action,
            food_price: this.updateData.food_price,
            food_type: this.updateData.food_type,
          },
        })
          .then((data) => {
            if (data.data.code === 200) {
              this.$message({
                message: "更新成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "更新失败，请稍后重试",
                type: "warning",
              });
            }
            this.$emit('close')
          })
          .catch((err) => {
            console.log(err);
            this.$message({
                message: "更新失败，请稍后重试",
                type: "warning",
              });
               this.$emit('close')
          });
          
      } else {
        // console.log(this.shangchuan());
        // console.log(this.updateData);
        // console.log(obj)
        // this.shangchuan()
        // let form = new FormData();
        // form.append("uploadImg", obj.file);
        // form.append("food_name", this.updateData.food_name);
        // form.append("food_action", this.updateData.food_action);
        // form.append("food_price", this.updateData.food_price);
        // form.append("food_type", this.updateData.food_type);
        // console.log(form)
        // this.axios({
        //   method: "post",
        //   url: api.DJLADDFOOD,
        //   data: form
        // })
        //   .then((data) => {
        //     console.log(222);
        //     console.log(data);
        //     if (data.data.code === 200) {
        //       this.$message({
        //         message: "添加成功",
        //         type: "success",
        //       });
        //     } else {
        //       this.$message({
        //         message: "添加失败，请稍后重试",
        //         type: "warning",
        //       });
        //     }
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
      }

      // this.$emit("close");
    },
    handleAvatarSuccess() {
      // console.log(file.raw);
      // this.imageUrl = URL.createObjectURL(file.raw);
    },

    shangchuan(obj) {
      console.log(obj);
      let form = new FormData();
      form.append("uploadImg", obj.file);
      form.append("food_name", this.updateData.food_name);
      form.append("food_action", this.updateData.food_action);
      form.append("food_price", this.updateData.food_price);
      form.append("food_type", this.updateData.food_type);
      return form;
      // this.axios({
      //     method: "post",
      //     url: api.DJLADDFOOD,
      //     data: form
      //   })
      //     .then((data) => {
      //       console.log(222);
      //       console.log(data);
      //       if (data.data.code === 200) {
      //         this.$message({
      //           message: "添加成功",
      //           type: "success",
      //         });
      //       } else {
      //         this.$message({
      //           message: "添加失败，请稍后重试",
      //           type: "warning",
      //         });
      //       }
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
    },
  },
  computed: {
    dialogFormVisible() {
      return this.zhuangrai;
    },
  },
};
</script>

<style lang='less' scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.boxMax{
  width: 300px;
  height: 300px;
  background-color: white;
}
</style>
